<template>
  <div class="recommend-content">
    <!--    推荐页面展示(轮播图)-->
    <van-swipe :autoplay="6000" lazy-render style="height: 148px">
      <van-swipe-item v-for="banner in  bannerList" :key="banner.id">
        <a :href="banner.originSchemeUrl">
          <img style="width: 100%; height: 148px" :src="banner.picUrl"/>
        </a>
      </van-swipe-item>
    </van-swipe>
    <!--    网易自营品牌整体数据-->
    <ul class="policy-desc-list">
      <!--        网易自营品牌每一个数据 -->
      <li class="policy-desc-item" v-for="(policyDesc,index) in policyDescList" :key="index">
        <van-icon :name="policyDesc.icon" size="16"/>
        <span class="desc">{{ policyDesc.desc }}</span>
      </li>
    </ul>
    <!--    新品首发整个数据-->
    <ul class="king-kong-list">
      <li class="king-kong-item" v-for="(kingKong,index) in kingKongList" :key="index">
        <a :href="kingKong.schemeUrl">
          <img class="picUrl" :src="kingKong.picUrl">
          <span class="text" :style="{color: kingKong.textColor}">{{ kingKong.text }}</span>
        </a>
      </li>
    </ul>
    <!--    9.99.9专业台灯-->
    <!--
    <div class="big-promotion-module">
      <a :href="bigPromotionModule.schemeUrl">
        <img :src="bigPromotionModule.picUrl" style="width: 100%">
        &lt;!&ndash;        台灯里面的图片&ndash;&gt;
        <img class="small-pic" :src="smallPicUrl">
      </a>
    </div>
    -->
    <!--    新人专享-->
    <div class="new-person-module">
      <p class="title">— 新人专享礼 —</p>
      <!--      新人专享整体图片合级-->
      <div class="new-person-content">
        <!--        新人专享左面图片-->
        <div class="left">
          <a href="https://act.you.163.com/act/pub/qAU4P437asfF.html">
            <p class="text">新人专享礼包</p>
            <div class="logo">
              <img src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png">
              <div class="animate"></div>
            </div>
          </a>

        </div>
        <!--        新人专享右面图片-->
        <div class="right">
          <div class="index-activity" v-for="(indexActivity,index) in indexActivityList" :key="index">
            <a :href="indexActivity.targetUrl">
              <div style="z-index: 1; position: relative">
                <!--            福利社-->
                <p class="index-activity-title">{{ indexActivity.title }}</p>
                <!--            今日特价-->
                <p v-if="!indexActivity.tag" class="index-activity-subTitle">{{ indexActivity.subTitle }}</p>
                <!--              1元起包邮-->
                <van-tag color="#cbb693" type="primary">{{ indexActivity.tag }}</van-tag>
              </div>
              <!--            图片-->
              <div class="index-activity-pic">
                <img :src="indexActivity.picUrl">
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--    类目热销榜-->
    <div class="categoryHotSellModule">
      <!--      类目热销榜文字-->
      <p class="title">{{ categoryHotSellModule.title }}</p>
      <!--      里面所有数据-->
      <ul class="hot-category-list">
        <!--        每一个数据-->
        <li class="hot-category-item" v-for="(categoryHotSell,index) in categoryHotSellModule.categoryList"
            :key="index">
          <a :href="categoryHotSell.targetUrl">
            <div class="hot-category-item-content">
              <!--         每个数据名字 -->
              <span class="name">{{ categoryHotSell.categoryName }}</span>
              <!--          每个数据图片-->
              <img class="pic" :src="categoryHotSell.picUrl">
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!--    好好睡-->
    <ul class="scene-shopping-list">
      <li class="scene-shopping-item" v-for="(shopping, index) in sceneLightShoppingGuideList" :key="index">
        <a :href="shopping.styleItem.targetUrl">
          <div class="scene-shopping-item-content">
            <p class="title" :style="{color: `#${shopping.styleItem.titleColor }`}">{{ shopping.styleItem.title }}</p>
            <p class="desc" :style="{color: `#${shopping.styleItem.descColor }`}">{{ shopping.styleItem.desc }}</p>
            <div class="img-wrap">
              <img v-for="(picUrl,picIndex) in  shopping.styleItem.picUrlList " :key="picIndex" :src="picUrl">
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import {getIndexData} from "@/api/Home";

export default {
  name: "HomeRecommendContent",
  data() {
    return {
      /*intervalId: null,*/
      bannerList: [],
      policyDescList: [],
      kingKongList: [],
      /*bigPromotionModule: {},*/
      smallPicUrl: null,
      indexActivityList: [],
      categoryHotSellModule: [],
      sceneLightShoppingGuideList: [],
    }
  },
  created() {
    console.log("进入首页推荐组件");
    getIndexData().then((response) => {
      // 打印轮播图数据
      this.bannerList = response.data.data.focusList;
      //网易自营品牌数据
      this.policyDescList = response.data.data.policyDescList;
      //新品首发整体
      this.kingKongList = response.data.data.kingKongModule.kingKongList;
      //9.9专业台灯
      /*this.bigPromotionModule = response.data.data.bigPromotionModule.floorList[0].cells[0];*/
      //台灯里面的所有图片
      /*let index = 0;
      const itemList = this.bigPromotionModule.itemList;
      //台灯里面初始值第一张展示图片
      this.smallPicUrl = itemList[index].picUrl;
      //图片定时器
      this.intervalId = setInterval(() => {
        index++;
        //长度为10
        index = index % itemList.length;
        /!*console.log(`取第${index}张图片`);*!/
        this.smallPicUrl = itemList[index].picUrl;
      }, 2000);*/
      //新人专享右侧图片
      this.indexActivityList = response.data.data.indexActivityModule;
      //类目热销榜
      this.categoryHotSellModule = response.data.data.categoryHotSellModule;
      //好好睡
      this.sceneLightShoppingGuideList = response.data.data.sceneLightShoppingGuideModule;
    });
  },
  /*destroyed() {
    console.log("destroyed")
    clearInterval(this.intervalId);
  },*/
  mounted() {
    this.$store.dispatch('getUserInfo')
  }
}
</script>

<style scoped lang="less">
p {
  margin: 0;
}

.recommend-content {
  background-color: rgb(238, 238, 238);
  padding-bottom: 50px;
}

.policy-desc-list {
  background-color: white;
  display: flex;
  justify-content: space-evenly;
  height: 36px;
  align-items: center;

  .policy-desc-item {
    display: flex;

    .desc {
      font-size: 12px;
      color: #333;
      margin-left: 4px;
      line-height: 16px;
    }
  }
}

.king-kong-list {
  overflow: hidden;
  background-color: white;

  .king-kong-item {
    margin: 5px 0 5px 0;
    box-sizing: border-box;
    width: 20%;
    float: left;
    text-align: center;

    .picUrl {
      width: 55px;
      height: 55px;
    }

    .text {
      margin-top: 5px;
      font-size: 12px;
      line-height: 18px;
      white-space: nowrap;
      color: #333333;
    }
  }
}

.big-promotion-module {
  position: relative;

  .small-pic {
    position: absolute;
    top: 14%;
    left: 10%;
    width: 84px;
    height: 84px;
  }
}

.new-person-module {
  background-color: white;
  margin-top: 10px;
  padding-bottom: 15px;
  margin-bottom: 10px;

  .title {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
  }

  .new-person-content {
    display: flex;
    padding: 0 15px;
    overflow: hidden;

    .left {
      flex: 1;
      background-color: #f9e9cf;
      border-radius: 2px;
      margin-right: 2px;
      height: 217px;

      .text {
        font-size: 16px;
        padding: 15px 0 0 15px;
        font-family: PingFangSC-Medium;
        color: #333333;
      }

      .logo {
        width: 129px;
        height: 128.5px;
        margin: 18.5px auto;
        position: relative;

        img {
          width: 100%;
        }

        .animate {
          position: absolute;
          width: 15px;
          height: 10px;
          bottom: 9px;
          right: 32.5px;
          background: url(https://yanxuan.nosdn.127.net/3f7e731c6650bc1770589c78bd5a18b7.png) no-repeat;
          background-size: 100% 100%;
          animation: carousel 1s linear infinite;
        }
      }
    }

    .right {
      flex: 1;

      .index-activity {
        height: 97.5px;
        padding: 10px 0 0 15px;
        margin-bottom: 2px;
        background-color: #fbe2d3;
        border-radius: 4PX;
        position: relative;

        .index-activity-title {
          font-size: 16px;
          font-family: PingFangSC-Medium;
          color: #333333;
        }

        .index-activity-subTitle {
          color: #7f7f7f;
          font-size: 12px;
          margin-top: 5px;
        }

        .index-activity-pic {
          width: 100px;
          height: 100px;
          position: absolute;
          right: 0;
          bottom: 0;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .index-activity:last-child {
        background-color: #ffecc2;
      }
    }
  }
}

.categoryHotSellModule {
  padding-left: 15px;
  padding-right: 10px;
  margin-bottom: 10px;
  background-color: white;

  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-family: PingFangSC-Regular;
    color: #333333;
  }

  .hot-category-list {
    overflow: hidden;

    .hot-category-item {
      box-sizing: border-box;
      width: 50%;
      float: left;
      margin-bottom: 5px;
      padding-right: 5px;

      .hot-category-item-content {
        position: relative;
        height: 100px;

        .name {
          color: #333;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          margin-top: 33px;
          position: relative;
          z-index: 1;
          display: inline-block;
          margin-left: 12px;
        }

        .pic {
          width: 100px;
          height: 100px;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }

    .hot-category-item:first-child {
      .hot-category-item-content {
        background-color: #f9f3e4;

        .name::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -8px;
          width: 24px;
          height: 2px;
          background: #333;
        }
      }
    }

    .hot-category-item:nth-child(2) {
      .hot-category-item-content {
        background-color: #ebeff6;

        .name::before {
          content: "";
          position: absolute;
          left: 0;
          bottom: -8px;
          width: 24px;
          height: 2px;
          background: #333;
        }
      }
    }

    .hot-category-item:nth-child(n+3) {
      width: 25%;

      .hot-category-item-content {
        height: 90px;
        background-color: #f5f5f5;

        .name {
          display: block;
          margin-top: 0;
          padding-top: 5px;
          font-size: 12px;
          margin-left: 0;
          text-align: center;
        }

        .pic {
          width: 60px;
          height: 60px;
          position: static;
          margin-top: 1px;
          margin-left: 11.5px;
        }
      }
    }
  }
}

.scene-shopping-list {
  background-color: white;
  margin-bottom: 10px;
  padding: 5px 15px 15px 13px;
  overflow: hidden;

  .name::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 24px;
    height: 2px;
    background: #333;
  }
}

.hot-category-item:nth-child(n+3) {
  width: 25%;

  .hot-category-item-content {
    height: 90px;
    background-color: #f5f5f5;

    .name {
      display: block;
      margin-top: 0;
      padding-top: 5px;
      font-size: 12px;
      margin-left: 0;
      text-align: center;
    }

    .pic {
      width: 60px;
      height: 60px;
      position: static;
      margin-top: 1px;
      margin-left: 11.5px;
    }
  }
}

.scene-shopping-list {
  background-color: white;
  margin-bottom: 10px;
  padding: 5px 15px 15px 13px;
  overflow: hidden;

  .scene-shopping-item {
    box-sizing: border-box;
    width: 50%;
    float: left;

    .scene-shopping-item-content {
      margin: 2px 0 0 2px;
      padding: 10px 0 0 10px;
      border-radius: 2px;
      background-color: #f5f5f5;

      .title {
        font-size: 16px;
        padding-left: 5px;
        font-family: PingFangSC-Medium;
      }

      .desc {
        font-size: 12px;
        padding-left: 5px;
        margin-top: 8px;
      }

      .img-wrap {
        margin-top: 3px;
        padding-left: 5px;

        img {
          width: 75px;
          height: 75px;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
